<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <!-- 百度禁止转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait" />
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrai" />
    <!-- 禁用电话号码邮箱自动识别 -->
    <meta name="format-detection" content="telephone=no,email=no" />
    <title>demo</title>
    <link rel="stylesheet" href="./css/light.min.css" id="light" />
    <style>
      .dark {
        background-color: #363636;
        filter: invert(100) hue-rotate(180deg);
      }
      .dark img {
        filter: invert(100) hue-rotate(180deg);
      }
    </style>
  </head>

  <body>
    <button type="button" id="switch">Switch theme</button>
    <p><img src="https://www.wangbase.com/blogimg/asset/201905/bg2019053119.jpg" alt="" title="" /></p>
    <p style="color:red;">一个第三方的 GMail 的 Web 客户端。</p>
    <a href="https://www.baidu.com">百度链接</a>
    <form action="">
      <input type="text" name="" id="" placeholder="hahah">
      <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>
    <script>
      var darkSwitch = false
      document.getElementById('switch').addEventListener(
        'click',
        function() {
          if (darkSwitch) {
            document.querySelector('body').classList.remove('dark')
            darkSwitch = false
          } else {
            document.querySelector('body').classList.add('dark')
            darkSwitch = true
          }
        },
        false
      )
    </script>
  </body>
</html>
